<template>
  <div class="profile-container">
    <div class="profile-box">
      <el-container>
        <el-aside width="200px">
          <el-menu>
            <el-menu-item-group v-for="(item, index) in menu" :key="index">
              <template slot="title">
                  <span class="title">{{ item.label }}</span>
              </template>
              <el-menu-item
                v-for="(child, index) in item.children"
                :key="index"
              >
                {{ child.label }}
              </el-menu-item>
            </el-menu-item-group>
          </el-menu>
        </el-aside>
        <el-main style="padding: 0px">
          <div class="profile-body">
              <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          label: "个人",
          children: [
            { label: "个人中心" },
            { label: "我的海贝" },
            { label: "我的会员特权" },
            { label: "我的优惠券" },
            { label: "我的消息" },
            { label: "我的财富" },
          ],
        },
        {
          label: "产品",
          children: [{ label: "收藏与订阅" }, { label: "售后服务" }],
        },
        {
          label: "订单",
          children: [
            { label: "生态商城订单" },
            { label: "净水商城订单" },
            { label: "海贝商城订单" },
            { label: "社区试用订单" },
          ],
        },
        {
          label: "账号",
          children: [{ label: "账号管理" }, { label: "地址管理" }],
        },
        {
          label: "我的推广",
          children: [{ label: "邀请好友" }, { label: "推广成果" }],
        },
        {
          label: "相关",
          children: [
            { label: "社区个人中心" },
            { label: "会员梦享+" },
            { label: "帮助中心" },
            { label: "隐私政策" },
          ],
        },
      ],
    };
  },
  beforeCreate(){
    console.log(localStorage)
    var {status} = localStorage
    if(!status){
      this.$router.push('/login')
    }
  }
};
</script>

<style scoped>
.profile-box {
  position: relative;
  width: 60%;
  margin: 0 auto;
}

.profile-container{
    width: 100%;
    background: #F6F6F6;
    padding-top: 50px;
    padding-bottom: 100px;
}

.profile-body{
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
}
.title{
    font-size: 1.2em;
}
</style>